<template>
    <div class="home">
        <!-- 轮播图区域 -->
        <!-- 使用公共轮播图组件步骤3:放置到页面中,并把轮播图的数据传递过去 -->
        <!-- :isfull="true" 图片宽度为100% -->
        <swiper :lunbotuList="lunbotuList" :isfull="true"></swiper>

        <!-- MUI九宫格到六宫格的改造过程 -->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/newslist">
                    <img src="../../images/menu1.png" alt="">
                    <div class="mui-media-body">新闻资讯</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/photolist">
                    <img src="../../images/menu2.png" alt="">
                    <span class="mui-badge">5</span>
                    <div class="mui-media-body">图片分享</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <router-link to="/home/goodslist">
                    <img src="../../images/menu3.png" alt="">
                    <div class="mui-media-body">商品购买</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <img src="../../images/menu4.png" alt="">
                    <div class="mui-media-body">留言反馈</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                <a href="#">
                    <img src="../../images/menu5.png" alt="">
                    <div class="mui-media-body">视频专区</div>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/menu6.png" alt="">
                    <div class="mui-media-body">联系我们</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-gear"></span>
		                    <div class="mui-media-body">Setting</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-info"></span>
                    <div class="mui-media-body">about</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <span class="mui-icon mui-icon-more"></span>
                    <div class="mui-media-body">more</div></a></li>
        </ul>

        <h3>HomeContainer</h3>
        <!-- 应用本地图片 -->
        <!-- <img src="../../img/banner01.jpg" alt=""> -->
    </div>
</template>
<script>
import { Toast } from "mint-ui";
//import data from '../../json/lunbotuData.json';//导入src下json目录里的本地数据
//console.log(data);
//使用公共轮播图组件步骤1：导入轮播图公共组件
import swiper from '../subcomponents/swiper.vue';

export default {
    data() {
        return {
            lunbotuList: [] //定义为 null 也可以 //保存轮播图的数组
        }
    },
    created() {
        this.getLunbotu();//调用轮播图方法
    },
    methods: {
        getLunbotu(){
            //http://vue.studyit.io/api/getlunbo //失效
            //引入本地的json数据需放在static目录里
            //此处不能加斜线
            this.$http.get("lunbotuData.json").then(result => {
                console.log(result);
                if(result.body.status===0){
                    //成功了
                    this.lunbotuList=result.body.message;
                    console.log("------"+this.lunbotuList);
                }else{
                    //失败了
                    Toast("加载轮播图失败...");
                }
            });
        }
    },
    components:{
        //使用公共轮播图组件步骤2:挂载到vue上
        swiper
    }
}
</script>
<style lang="scss" scoped>
    .home img{
        width: 100%;
        height: 200px;
    }

    .mui-grid-view.mui-grid-9{
        background-color: #fff;
        border: none;
        img{
            width: 60px;
            height: 60px;
        }
        .mui-media-body{
            font-size: 13px;
        }
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border: 0;
    }

</style>
